<template>
  <div>
    <h2>地图下钻效果</h2>
    <div ref="map" style="width: 100%;height: 800px;"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts'
// 获取地图rongqu
let map = ref(null)
// echarts地图实例
let myCharts = ref()
// 中国地图编码
const chinaCode = ref(100000);
// 当前地图名称
const currentMapName = ref("china");

onMounted(() => {
  // 初始化地图
  myCharts.value = echarts.init(map.value)
  // 获取地图数据
  getMapData(chinaCode.value + '_full')
  // 地图下钻,通过点击事件下钻到省份以及区县
  myCharts.value.on("click", (params) => {
    // console.log(params, '1111111');
    if (params.value) {
      currentMapName.value = params.name;
      getMapData(params.value + '_full');
    }
    // 获取地图参数
    // console.log(myCharts.value.getOption().series[0].zoom,'111111')
  })
})
// 全国地图的回调 初始化地图
const initMap = (mapName:string, mapJSON:any) => {
  echarts.registerMap(mapName, mapJSON);
  myCharts.value.setOption({
    backgroundColor: '#404a59',
    tooltip: {
      show: true,
      textStyle: {
        color: "#00688B",
        fontSize: "12",
        width: 20,
        height: 30,
        overflow: "break",
      },
      formatter(params) {  //series中第二种数据样式时需要加这部分   
        // console.log(params)       
        return `地区：${params.name}</br>adcode：${params.value}`;
      }
    },
    // 左上角文字
    graphic: [
      {
        type: "text",
        left: "10%",
        top: "10%",
        style: {
          text: "中国地图",
          font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
          fill: "#fff",
        },
      },
    ],
    series: [
      {
        type: "map",
        map: mapName,
        roam: true, //是否可以拖拽
        selectedMode: "false", // 是否允许选中多个区域
        label: {
          show: true, //显示省份名字
          color: '#fff'
        },
        top: "9%",
        left: "center",
        zoom: "1.2",
        // z:5,
        itemStyle: {
          // areaColor: "#00688B",
          // borderColor: "orange",
          borderColor: "rgba(147, 235, 248, 1)",//地图边框描边颜色
          borderWidth: 1,
          areaColor: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          shadowColor: "rgba(128, 217, 248, 1)",
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10,
        },
        data: initMapData(mapJSON),
        emphasis: {
          itemStyle: {
            // 这个是鼠标移上去就会选中的样式，鼠标mouseover
            borderWidth: 1,
            borderColor: "#666",
            areaColor: "#3EB8B5",
          },
          select: {
            itemStyle: {
              areaColor: "orange"
            }
          }
        }
      }
    ],
  })
}
// 处理数据
const initMapData = (mapJson) => {
  let mapData = [];
  // 遍历获取地图名称以及地图编码adcode,注意:需要使用value属性进行存储
  mapData = mapJson.features.map((item:any) => {
    return { name: item.properties.name, value: item.properties.adcode };
  })
  // console.log(mapData, '222222')
  return mapData;
}
// 获取地图数据
const getMapData = async (mapCode: number | string) => {
  console.log(mapCode, '省份编码')
  // 阿里云-数据可视化平台  
  // 网址:https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4
  let url = `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${mapCode}`
  console.log(url)
  try {
    // 请求数据
    let res = await axios.get(url)
    // console.log(res, '地图接口获取的数据')
    // 主要的参数:两个,地图名称  地图编码
    if (res.status == 200) {
      const mapJSON = res.data;
      // console.log(mapJSON, 'mapJSON');
      // 当前地图名称 地图数据
      initMap(currentMapName.value, mapJSON)
    }
  } catch (error) {
    // console.log(error)
    // 区县级地图需要处理一下接口地址
    mapCode = mapCode.toString().replace('_full', '')
    getMapData(mapCode)
  }

}
</script>

<style lang="scss" scoped></style>